<script>
// 分类页面
import { onMounted, reactive, ref, toRefs } from "vue";
import { getCartypes, getCartypestobas } from "../api/Cartypes";
import { Toast } from "vant";
import { useRouter } from "vue-router";

export default {
  setup() {
    const state = reactive({
      emid: 0,
      count: 0,
      lists: [],
      spareList: [], //备用数据
      headerlist: null,
      btn_index: 15, //默认排列
      liss_index: 1,
      loading: false,
      finished: false,
      load: false,
      tabs: [],
      screenList: [], //筛选条件数组
            btnFlag:false,
      scrollTop: 200,
    });
    const router = useRouter();
    state.emid = router.currentRoute._value.query.emid;
    console.log(state.emid, "路由");

    const onClickLeft = () => history.back();

    //过滤器
    let getFilter = (num) => {
      if (num < 10000) {
        return num;
      }
      let w = num > 10000 ? num / 10000 : num; //万计算
      let y = w > 10000 ? parseInt(w / 10000) + "亿" : parseInt(w) + "万";
      return y;
    };

    //初始化数据
    onMounted(() => {
      getCartypesFun(state.btn_index, state.liss_index);

        getCartypestobas().then(data=>{
          state.tabs = data.tobas
          console.log(state.tabs);
        })
   });

    //初始数据判断，把不符合的去除
    let getCartypesFun = (id, key) => {
      getCartypes(id, key, state.emid).then((data) => {
        data.data.lists.forEach((item) => {
          state.lists.push(item);
          state.spareList.push(item);
        });

        console.log(state.lists, "初始化数据");
      });
    };

    const value = ref(15);
    const item = ref(null);
    const switch1 = ref(false);
    const switch2 = ref(false);

    const options = [
      { text: "按人气", value: 15 },
      { text: "按畅销", value: 16 },
      { text: "按键票", value: 17 },
      { text: "按总字数", value: 1 },
      { text: "按更新时间", value: 14 },
    ];

    // 点击切换排序
    let btnFun = (value) => {
      state.lists = [];
      state.liss_index = 1;
      getCartypesFun(value, state.liss_index);
    };

    //下拉刷新
    let onLoad = () => {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        for (let i = 0; i < 1; i++) {
          state.liss_index += 1;
          getCartypesFun(state.btn_index, state.liss_index);
        }

        // 加载状态结束
        state.loading = false;
        // 数据全部加载完成
        if (state.liss_index >= 20) {
          state.finished = true;
        }
      }, 2000);
    };

    // 连载
    let SerialsFun = (id) => {
      let index = state.tabs[0].title.findIndex((item) => item.id == id);
      if (!state.tabs[0].title[index].flag) {
        state.lists.forEach((item) => {
          if (item.bookStatus.id == id) {
            state.screenList.push(item);
          }
        });
        state.tabs[0].title[index].flag = !state.tabs[0].title[index].flag;
      } else {
        state.screenList = state.screenList.filter(
          (item) => item.bookStatus.id != id
        );
        state.tabs[0].title[index].flag = !state.tabs[0].title[index].flag;
      }
      console.log(state.screenList, "4454546515");
    };
    //字数帅选
    let wordFun = (minnum,maxnum) => {
      console.log(minnum,maxnum);
      let index = state.tabs[1].title.findIndex((item) => item.minnum == minnum);

      if (!state.tabs[1].title[index].flag) {
        state.lists.forEach((item) => {
          if (item.wordCount >= minnum && item.wordCount <= maxnum) {
            state.screenList.push(item);
          }
        });
        state.tabs[1].title[index].flag = !state.tabs[1].title[index].flag;
      } else {
        state.screenList = state.screenList.filter(
          (item) => item.wordCount <= minnum && item.wordCount >= maxnum 
        );
        state.tabs[1].title[index].flag = !state.tabs[1].title[index].flag;
      }
      console.log(state.screenList, "4454546515");
    };

    //确认按钮
    const onConfirm = () => {
      Toast.success("确认筛选");
      item.value.toggle();
      state.lists = state.screenList
    };
         // 回到顶部
    const backTop = () => {
      console.log(window, state.scrollTop, "top");

      let timer = setInterval(() => {
        let ispeed = Math.floor(-state.scrollTop / 5);
        document.documentElement.scrollTop = document.body.scrollTop =
          state.scrollTop + ispeed;
        if (state.scrollTop === 0) {
          clearInterval(timer);
        }
      }, 16);
    };
       const scrollToTop = () => {
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      state.scrollTop = scrollTop;
      if (state.scrollTop > 200) {
        state.btnFlag = true;
      } else {
        state.btnFlag = false;
      }
      // console.log(scrollTop, "top");
    };

    return {
      wordFun,
      SerialsFun,
      btnFun,
      ...toRefs(state),
      onClickLeft,
      getFilter,
      item,
      value,
      switch1,
      switch2,
      options,
      onConfirm,
      onLoad,
            scrollToTop,
      backTop,
    };
  },
      mounted() {
    window.addEventListener("scroll", this.scrollToTop);
  },
};
</script>
<template>
  <div class="Cartypes">
    <div class="bac-top" v-if="btnFlag" @click="backTop"></div>

    <van-nav-bar
      :fixed="true"
      :placeholder="true"
      title="都市小说"
      left-arrow
      @click-left="onClickLeft"
    />

    <header>
      <div class="left">筛选条件</div>
      <div class="right">
        <van-dropdown-menu>
          <van-dropdown-item
            @change="btnFun(value)"
            v-model="value"
            :options="options"
          />

          <van-dropdown-item title="筛选" ref="item">
            <div class="car" v-for="item in tabs" :key="item.type">
              <p>
                <span>{{ item.name }}</span
                ><a></a>
              </p>
              <div v-if="item.type == 0">
                <li v-for="items in item.title" :key="items.id">
                  <span
                    :class="items.flag ? 'con' : ''"
                    @click="SerialsFun(items.id)"
                    >{{ items.name }}</span
                  >
                </li>
              </div>

              <div v-if="item.type == 1">
                <li v-for="items in item.title" :key="items.id">
                  <span
                    @click="wordFun(items.minnum,items.maxnum)"
                    :class="items.flag ? 'con' : ''"
                    ><i>{{ getFilter(items.minnum) }}-{{ getFilter(items.maxnum) }}字</i></span
                  >
                </li>
              </div>
            </div>

            <div class="null"></div>

            <div style="padding: 5px 16px">
              <van-button type="danger" block round @click="onConfirm">
                确认
              </van-button>
            </div>
          </van-dropdown-item>
        </van-dropdown-menu>
      </div>
    </header>
    <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <ul v-if="lists">
        <router-link
          custom
          :to="'/details?id=' + item.id"
          v-slot="{ href, navigate }"
          v-for="item in lists"
          :key="item.id"
        >
          <li :href="href" @click="navigate">
            <div class="img">
              <img :src="item.coverImg" alt="" />
            </div>
            <div class="right">
              <h6>{{ item.bookName }}</h6>
              <p>{{ item.introduction }}</p>
              <div>
                {{ item.authorPenName }}&nbsp;·&nbsp;{{
                  item.bookCategory.name
                }}&nbsp;·&nbsp;{{ getFilter(item.wordCount) }}字
              </div>
            </div>
          </li>
        </router-link>
      </ul>
    </van-list>
  </div>
</template>

<style lang="scss" scoped>
  .bac-top {
    position: fixed;
    bottom: 80px;
    right: 10px;
    width: 37px;
    height: 37px;
    background: url("../assets/img/10068.png") no-repeat center;
    background-size: 37px 37px;
    z-index: 999;
  }
:deep {
  .van-dropdown-menu__bar {
    background-color: transparent;
    box-shadow: none;
    height: 13px;
  }
  .van-dropdown-menu__item {
    flex: none;
    margin: 0 5px;
  }
  .van-ellipsis {
    font-size: 12px;
    color: #666;
  }
  .van-icon {
    color: #999;
  }
}
.Cartypes {
  background-color: #fcfcfc;
  header {
    position: fixed;
    top: 45px;
    background-color: #fcfcfc;
    z-index: 10;
    display: flex;
    justify-content: space-between;
    padding: 10px 15px;
    color: #666666;
    width: 100%;
    font-size: 12px;
    align-items: center;
    box-sizing: border-box;
    .right {
      display: flex;
      span {
        display: flex;
        align-items: center;
        i {
          margin-left: 3px;
        }
      }
    }
  }
  ul {
    padding-top: 36.8px;
    li {
      background-color: #fff;
      padding: 10px 25px;
      border-bottom: 1.5px solid #f8f8f8;
      display: flex;
      &:last-child {
        border: none;
      }
      .img {
        margin-right: 15px;
        height: 85px;
        img {
          height: 100%;
          border-radius: 3px;
        }
      }
      .right {
        overflow: hidden;
      }
      h6 {
        font-size: 15px;
        font-weight: 500;
        margin-bottom: 10px;
      }
      p {
        -webkit-line-clamp: 2;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 13px;
        color: #545454;
        box-sizing: border-box;
        margin-bottom: 5px;
      }
      div {
        font-size: 12px;
        color: #a9a9a9;
      }
    }
  }
  .car {
    padding: 0 10px;
    p {
      padding: 12px 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      span {
        margin-right: 10px;
      }

      a {
        flex: 1;
        height: 0.5px;
        background-color: #ccc;
      }
    }
    div {
      display: flex;
      flex-wrap: wrap;
      li {
        padding: 5px 0;
        width: 25%;
        text-align: center;
        span {
          align-items: center;
          display: block;
          border-right: 1px solid #696969;
        }
        .con {
          color: #f13232;
          box-sizing: border-box;
        }
        &:nth-child(4n) span {
          border: none;
        }
        &:last-child span {
          border: none;
        }
      }
    }
    &:last-child {
      padding-bottom: 50px;
    }
  }
  .null {
    padding-bottom: 50px;
  }
}
</style>